require(['./config'], () => {
    //有返回值得参数放前边
    require(['template','header', 'zoom','footer'], (template) => {
        class Detail {
            constructor() {
                this.init().then(() => {
                    this.addToCart()  
                    this.zoom()
                  })
            }
            init(){
                //init方法只负责请求数据渲染页面
                //其他功能不管，交给then去调用
                //从地址栏获取ID
                const id = Number(window.location.search.slice(4))
                //把异步的代码写成同步的，用到promise
                return new Promise((resolve,reject)=>{
         // 根据id请求后端接口拿到当前商品的详情数据
          $.get('http://rap2api.taobao.org/app/mock/239693/detail', { id }, resp => {
            console.log(resp)
            if (resp.code === 200) {
              const { detail } = resp.body
              // 由于rap2接口没有返回id，所以需要手动设置一下，将来换成真实接口的时候就不需要了
              // 把detail展开，把id写进去，最后构成一个新的对象赋值给this.detail
              this.detail = { ...detail, id }
              // 渲染详情页
              // 把detail展开，所有属性全部传递进去
              $('#design').html(template('detailTemplate', { ...this.detail }))
              // 代表异步成功，承诺兑现
              resolve()
            }
          })
                })
            }
            addToCart () {
                // 加入购物车
                $('#add-to-cart-btn').on('click', (e) => {
                  this.fly(e)
                  // 把当前详情数据加入到购物车里
                  // localStorage
        
                  // 1、先把购物车数据取出来
                  let cart = window.localStorage.getItem('cart')
                  // 2、判断cart是否有数据
                  if (cart) {
                    // 购物车里已经有数据了
                    cart = JSON.parse(cart)
                    // 判断当前商品是否已经存在在购物车里了
                    // 找cart里是否存在一件商品的id跟当前this.detail.id是相等的
                    const isExist = cart.some(shop => {
                      return shop.id === this.detail.id
                    })
                    console.log(isExist)
                    if (isExist) {
                      // 代表当前商品在购物车里已存在
                      // 只需要把当前商品的count属性+1就行了
                      cart = cart.map(shop => {
                        if (shop.id === this.detail.id) {
                          shop.count++
                        }
                        return shop
                      })
                    } else {
                      // 商品不存在
                      // push当前商品
                      cart.push({ ...this.detail, count: 1, check: true })
                    }
                    // 无论if还是else，都要把数组cart重新存localStorage把之前的覆盖掉
                    window.localStorage.setItem('cart', JSON.stringify(cart))
                  } else {
                    // 代表购物车为空
                    // 就把当前商品放到一个数组里，存进去
                    window.localStorage.setItem('cart', JSON.stringify([{ ...this.detail, count: 1, check: true }]))
        
                    // 上面那一句代码相当于下面这两句
                    // const arr = [
                    //   { ...this.detail, count: 1 }
                    // ]
                    // window.localStorage.setItem('cart', JSON.stringify(arr))
                  }
                  // 更新页面上显示的购物车数量
                  // 在这里接收到了header模块return出来的实例，可以直接调用方法
                  // 注意：这个方法的调用一定要在localStorage.setItem之后
                  header.calcCartCount()
                })
              }
              zoom () {
                $('.zoom-image').elevateZoom({
                  // 指定小图容器盒子的id，不加#
                  gallery: 'gal1'
                })
              }
        }
        new Detail()
    })
})